<template>
  <div class="sku">
    <!-- 遮罩层 -->
    <div class="mask" @click="closeSku"></div>

    <div class="sku-container">
      <!-- sku-头 -->
      <div class="sku-header">
        <!-- sku缩略图 -->
        <div class="sku-thumb-img">
          <van-image :src="datas.pictureComperssPath" />
        </div>

        <!-- 标题 -->
        <div class="sku-title">
          <p class="sku-title-price">{{datas.oriPrice | toFixed | rmb}}</p>

          <p class="sku-title-stocknum">剩余:{{datas.amount}}</p>

          <van-stepper integer v-model="num" />
        </div>
        <van-icon class="close" name="cross" @click="closeSku" />
      </div>

      <!-- sku-体 -->
      <div class="sku-body">
        <div class="sku-size sku-item">
          <div class="sku-item-title">尺寸：</div>
          <ul>
            <li 
              v-for="(item,idx) of datas.type" 
              :key="item.id" 
              @click="selectSku(item,idx)" 
              :class="current === idx ? 'sku-active' : null">{{item.name}}</li>
          </ul>
        </div>
        <div class="button-list">
          <van-button class="van-button van-button--danger van-button--large" @click="addShopCar">加入购物车</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Object,
      required: true,
      default: new Object()
    }
  },
  data() {
    return {
      skuOptions: {}, //sku的选择信息
      num:1,//商品数量
      current:0//默认选中的规格
    };
  },
  watch: {
    skuOptions: {//监听skuOptions
      handler(newVal) {
        // console.log(newVal)
        if(newVal){
          this.datas.skuComb.forEach((item)=>{
            if(item.s1 === newVal.id){
              this.datas.oriPrice = item.price//获取sku对应的价钱
              this.datas.amount = item.stock_num//获取sku对应的库存
              this.datas.selectType = newVal.name//获取sku对应的规格名字
              // console.log(this.datas)
            }
          })
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    closeSku() {
      //关闭sku弹窗
      this.$emit("closeSku");
    },
    selectSku(item,idx) {
      //选择sku
      this.skuOptions = item;
      this.current = idx;
    },
    addShopCar(){//添加购物车
      let goodsItem = {
        id:this.datas.id,//商品id
        name:this.datas.name,//商品名称
        img:this.datas.pictureComperssPath,//商品的图片
        sku:this.datas.selectType,//商品规格
        price:this.datas.oriPrice,//商品价钱
        num:this.num,//商品的数量
        isChecked:true//是否勾选
      }
      // console.log(goodsItem)

      // localStorage.setItem("goodsList",JSON.stringify([]))
      let goodsList = JSON.parse(localStorage.getItem("goodsList"))
      if(goodsList === null){//如果goodsList为空
        let arr = []
        arr.push(goodsItem)
        localStorage.setItem("goodsList",JSON.stringify(arr))
      }else if(goodsList && goodsList.length === 0){//goodsList有值，但是值为[]
        let arr = []
        arr.push(goodsItem)
        localStorage.setItem("goodsList",JSON.stringify(arr))
      }else{
        let arr = []
        let bool = false
        // arr.push(goodsItem)
        goodsList.forEach((item)=>{
          if(item.id === goodsItem.id && item.sku === goodsItem.sku){//同一件商品(id和sku都一样)
            item.num+=goodsItem.num//当前购买商品和购物车里面的商品相同，数量叠加
            console.log(item)
            bool = true
          }else{
            arr.push(item)
            // bool = false//问题出现在这里
          }
        })
        arr.push(goodsItem)
        // console.log(bool)
        // console.log(goodsList)
        // console.log(arr)

        if(bool){
          localStorage.setItem("goodsList",JSON.stringify(goodsList))
        }else{
          localStorage.setItem("goodsList",JSON.stringify(arr))
        }
      }
      let list = JSON.parse(localStorage.getItem("goodsList"))
      this.$eventBus.$emit("getGoodsList",list)
      this.$toast.success('购买成功');
      this.closeSku()//关闭sku弹窗
    }
  },
  created() {
    if (this.datas) {
      this.skuOptions = this.datas.type[0];
    }
  }
};
</script>

<style>
</style>
// 点击规格更换数据(对象)

// 点击购买

// 商品成员(对象)

// 商品列表(数组)

// 存储到本地离线存储